<template>
  <div id="login">
    <div id="logintitle"></div>
    <div id="loginbox" class="login-container">
      <div id="loginleft"></div>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm">
        <div class="logintitle">用户登录</div>
        <div style="border-top:1px solid #fff;padding:20px 40px;">
          <el-form-item prop="account" >
            <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="请输入用户名" prefix-icon="icon iconfont icon-yonghu">
            </el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请输入密码" prefix-icon="icon iconfont icon-mima" @keyup.enter.native="handleSubmit2"></el-input>
          </el-form-item>
          <!-- <el-checkbox v-model="checked" class="remember">记住密码</el-checkbox> -->
          <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;font-size:16px;background:#0064c8;border:0" @click.native.prevent="handleSubmit2" :loading="logining">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
          </el-form-item>
        </div>
      </el-form>
      <p style="line-height:180%; font-size:14px;color:#fff;text-align:center;clear:both; padding-top:20px">本系统支持Chrome、Firefox、IE10及以上版本浏览器<br>自然资源部</p>
    </div>
  </div>
</template>

<script>
import * as types from './store/types'
import qs from 'qs'
export default {
  data () {
    return {
      logining: false,
      ruleForm2: {
        account: '',
        checkPass: ''
      },
      rules2: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      checked: false
    }
  },
  methods: {
    handleReset2 () {
      this.$refs.ruleForm2.resetFields()
    },
    handleSubmit2 (ev) {
      var _this = this
      _this.$refs.ruleForm2.validate(valid => {
        if (valid) {
          _this.logining = true
          var loginParams = { Username: _this.ruleForm2.account, Password: _this.ruleForm2.checkPass, RememberMe: _this.checked }
          _this.$http
            .post('/account/login', qs.stringify(loginParams), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(function (response) {
              _this.logining = false
              if (response.data.IsSuccess === true) {
                console.log('登录成功')
                var token = 'token'
                var params = {data: token, user: _this.ruleForm2.account}
                // 保存cookie和登录名
                _this.$store.commit(types.LOGIN, params)
                // 跳转到主页
                _this.$router.replace('/home')
              } else {
                console.log('登录失败:' + response.data.Msg)
                _this.$message({
                  message: '登录失败:' + response.data.Msg,
                  type: 'error'
                })
              }
            })
            .catch(function (error) {
              console.log(error)
              _this.logining = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#loginleft{
  width:650px;
  height:320px;
  float:left;
  background:url(./assets/login_pic.png)
}
#logintitle{
  width:900px;
  height:80px;
  background: url(./assets/logintitle.jpg);
  margin:145px auto 35px;
}
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  background-clip: padding-box;
  margin: 0 auto;
  width: 1000px;
  height: 320px;
  background: #e9eef2;
  box-shadow: 0 0 25px #204F7F;
  .demo-ruleForm{
    width:350px;
    float: left;
  }
  .title {
    margin: 0px auto 40px auto;
    font-size:22px;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 20px 5px;
  }
  .logintitle{
    border-bottom:1px solid #d3d8dc;
    width:350px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size:20px;
    font-weight: bolder;
    color:#0064c8;
  }
}
</style>
